<template>
  <!-- 值班首页 -->
  <div class="duty-index height100">
    <el-row :gutter="20" class='height100'>
      <el-col :span="13" class='height100'>
        <div class="box" style="height: 20%;">
          <div class="head">
            <div class="left">今日情况</div>
            <div class="right"></div>
          </div>
          <div class="content">
            <div class="flex">
              <div class="today-item">
                <img src="../../../assets/img/zb-1.png" alt="" class="icon">
                <div class="item-right">
                  <div class="right-top">值班日报</div>
                  <div class="right-bottom">
                    <span class="strong">{{ conditionNum.daily }}</span>
                  </div>
                </div>
              </div>
              <div class="today-item">
                <img src="../../../assets/img/zb-2.png" alt="" class="icon">
                <div class="item-right">
                  <div class="right-top">值班日志</div>
                  <div class="right-bottom">
                    <span class="strong">{{ conditionNum.log }}</span>
                  </div>
                </div>
              </div>
              <div class="today-item">
                <img src="../../../assets/img/zb-3.png" alt="" class="icon">
                <div class="item-right">
                  <div class="right-top">值班签到</div>
                  <div class="right-bottom">
                    <span class="strong">{{ conditionNum.attendance }}</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="box" style="height: 37%;">
          <div class="head">
            <div class="left">值班日报统计</div>
            <div class="right">
              <el-date-picker v-model="daily_date" type="datetimerange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" size="small" value-format="yyyy-MM-dd HH:mm:ss" @change="dailyChange">
              </el-date-picker>
              <el-radio-group v-model="daily_type" size="small" @input="tabsDate($event, 2)">
                <el-radio-button label="1">本月</el-radio-button>
                <el-radio-button label="2">本周</el-radio-button>
                <el-radio-button label="3">本日</el-radio-button>
                <el-radio-button label="4" v-show="false">日期</el-radio-button>
              </el-radio-group>
              <span class="more-btn" @click="onMore({ type: 2 })">更多</span>
            </div>
          </div>
          <div class="content">
            <Statistics type="日报" :chartsOption="chartOption1" chartId="yjglsysyx3" barChartsId="yjglsysyx4"
              pieCharts="pie1" :pieData="pie1_data" :dailyTableData="daily_table" :bar_data="bar1_data"
              @clickBar="(name) => onMore({ type: 2, createDeptName: name }, name)" />
          </div>
        </div>
        <div class="box" style="height: 37%;">
          <div class="head">
            <div class="left">值班日志统计</div>
            <div class="right">
              <el-date-picker v-model="log_date" type="datetimerange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" size="small" value-format="yyyy-MM-dd HH:mm:ss" @change="logChange">
              </el-date-picker>
              <el-radio-group v-model="log_type" size="small" @input="tabsDate($event, 1)">
                <el-radio-button label="1">本月</el-radio-button>
                <el-radio-button label="2">本周</el-radio-button>
                <el-radio-button label="3">本日</el-radio-button>
                <el-radio-button label="4" v-show="false">日期</el-radio-button>
              </el-radio-group>
              <span class="more-btn" @click="onMore({ type: 1 })">更多</span>
            </div>
          </div>
          <div class="content">
            <Statistics type="日志" :chartsOption="chartOption2" chartId="yjglsysyx33" barChartsId="yjglsysyx46"
              pieCharts="pie2" :pieData="pie2_data" :dailyTableData="log_table" :bar_data="bar2_data"
              @clickBar="(name) => onMore({ type: 1, createDeptName: name }, name)" />
          </div>
        </div>
      </el-col>
      <el-col :span="11" class='height100'>
        <div class="box" style="height: 48%;">
          <div class="head">
            <div class="left">今日班次签到情况</div>
            <div class="right">
              <router-link tag="span" class="more-btn" to="/DutyStatisticsList?dateInfoStatus=0">更多</router-link>
            </div>
          </div>
          <div class="content   table-class">
            <el-table :data="sign_table" style="width: 100%;" border height="260" :header-cell-style="commonTableProps">
              <el-table-column type="index" label="序号" width="60" align="center">
              </el-table-column>
              <el-table-column prop="unitName" label="所属单位" align="center" width="140">
              </el-table-column>
              <el-table-column label="值班人数" align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.planLCount > 0 ? 'num-link' : ''"
                    @click="clickSign(scope.row.planLCount, 1, scope.row.unitName)">
                    {{ scope.row.planLCount }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="已签到" align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.signedIn > 0 ? 'num-link' : ''"
                    @click="clickSign(scope.row.signedIn, 2, scope.row.unitName)">
                    {{ scope.row.signedIn }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="未签到" align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.noSignedIn > 0 ? 'num-link' : ''"
                    @click="clickSign(scope.row.noSignedIn, 3, scope.row.unitName)">
                    {{ scope.row.noSignedIn }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="迟到" align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.lateCount > 0 ? 'num-link' : ''"
                    @click="clickSign(scope.row.lateCount, 4, scope.row.unitName)">
                    {{ scope.row.lateCount }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="早退" align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.excusedCount > 0 ? 'num-link' : ''"
                    @click="clickSign(scope.row.excusedCount, 5, scope.row.unitName)">
                    {{ scope.row.excusedCount }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="缺勤" align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.absentCount > 0 ? 'num-link' : ''"
                    @click="clickSign(scope.row.absentCount, 6, scope.row.unitName)">
                    {{ scope.row.absentCount }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="请假" align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.holidayCount > 0 ? 'num-link' : ''"
                    @click="clickSign(scope.row.holidayCount, 7, scope.row.unitName)">
                    {{ scope.row.holidayCount }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="box" style="height: 48%;">
          <div class="head">
            <div class="left">值班视频</div>
            <div class="right">
              <SelectOptions :value="videoValue" :options="videoOption" :defaultProp="defaultProp" />
            </div>
          </div>
          <div class="content video">
            <div class="input">
              <el-input v-model="search" placeholder="请输入" size="small">
              </el-input>
              <el-button size="small" type="primary">搜索</el-button>
            </div>
            <div class="video-item">
              <div style="padding-top: 10px" v-for="(item, i) in videoList" :key="i">
                <video class="" :id="`flv-${item.code}`" muted controls controlsList="nodownload" />
                <p style="padding-top: 5px;">{{ item.name }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <LsdDialog :dialogConfig="dialogParticulars" @close="closeDialog">
      <div slot="dialog" style="height: 100%;">
        <DexTable ref="particularsTable" :config="dialogConfig" :data="dialogData" :total='particularsTotal'
          @handleCurrentChange='particularsPageChange'
          :pageConfig="{ currentPage: pagination.pageNum, pageSize: pagination.pageSize }" height="100%" />
      </div>
    </LsdDialog>
    <LsdDialog :dialogConfig="dutyMoreDialog" @close="dutyMoreClose">
      <div slot="dialog" style="height: 100%;">
        <DexTable :config="moreConfig" :data="moreData" :withPage='false' height="100%" />
      </div>
    </LsdDialog>

  </div>
</template>

<script>
import { selectDailyOrLogApi, getSignInStatusApi, histogramDailyOrLogApi, getNumberOnDutyApi, getSignInListApi, getLeaveApi, getEarlyApi, getLateApi, getAbsenteeismApi, todaySituation } from "@/api/duty/daily/dutyIndex.js";
import DexTable from "@/components/DexTable.vue";
import Statistics from "./components/statistics.vue";
import { chartOption1, chartOption2, moreConfig } from "./confing.js";
import { columns_zhiban, columns_yiqiandao, columns_weiqiandao, columns_chidao, columns_zaotui, columns_queqin, columns_qingjia } from "./components/SignTableColumns";
// import { filtrateData } from "./components/SignData.js"; // 当前班次签到情况假数据
import SelectOptions from "@/components/selectOptions.vue";
import { getResourceLevelUnit } from "@/api/common.js";
import { parseStamp } from "@/utils/public.js";
import flv from "flv.js";
import Axios from "axios";
export default {
  name: "DutyIndex",
  components: {
    Statistics,
    DexTable,
    SelectOptions
  },
  data() {
    return {
      //   colorList: ["#f09658", "#4a95e6", "#43d2fe", "#4abc81", "#a1ff8f", "#E1C48B", "#6197E8", "#8BC2E1", "#6FF093"],
      chartOption1,
      chartOption2,
      daily_date: [], // 值班日报统计日期
      daily_type: "3", // 值班日报统计日期类型
      log_date: [], // 值班日志统计日期
      log_type: "3", // 值班日志统计日期类型
      video_type: "",

      pie1_data: [], // 值班日报饼状图
      pie2_data: [], // 值班日志饼状图
      dialogConfig: [], // 弹窗
      dialogData: [], // 弹窗
      daily_table: [],
      log_table: [],
      sign_table: [],
      search: "",
      bar1_data: [],
      bar2_data: [],
      dutyMoreDialog: {
        title: "",
        isShow: false, // 弹窗显示隐藏
        btnList: []
      },
      moreConfig,
      moreData: [],
      dialogParticulars: {
        title: "",
        isShow: false,
        btnList: []
      },
      signData: {},
      videoList: [
        {
          code: "150210000003020280",
          name: "国网湖北省电力有限公司1111111111111111"
        },
        {
          code: "150210000003020281",
          name: "国网武汉供电公司"
        },
        {
          code: "150210000003020282",
          name: "国网荆州供电公司"
        },
        {
          code: "151310000003040557",
          name: "国网宜昌供电公司"
        },
        {
          code: "151310000003040559",
          name: "国网襄阳供电公司"
        },
        {
          code: "151310000003040560",
          name: "国网孝感供电公司"
        },
        {
          code: "151310000003040562",
          name: "国网鄂州供电公司"
        },
        {
          code: "151310000003020327",
          name: "国网十堰供电公司"
        }
        //     {
        //   code: '151310000003020533',
        //   name: "国网湖北省电力有限公司"
        // },
      ],
      selectedIndex: "",
      hoveredIndex: "",
      monthStart: (new Date(new Date(new Date().getFullYear(), new Date().getMonth(), 1).setHours(0, 0, 0))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-"),
      monthEnd: (new Date(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).setHours(23, 59, 59, 59))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-"),
      mondayStart: "", // 本周开始时间
      mondayEnd: "", // 本周结束时间
      nowTime: "",
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      particularsTotal: 0,
      conditionNum: {
        attendance: "0/0",
        daily: "0/0",
        log: "0/0"
      },
      players: [],
      videoValue: "",
      videoOption: [],
      defaultProp: {
        label: "orgOtherName",
        value: "id"
      },
      commonTableProps: {
        "backgroundColor": "#193F8E",
        "color": "#fff"
      }

    };
  },
  mounted() {
    this.nowTime = parseStamp(new Date(), "YYYY-MM-DD");
    this.mondayStart = this.getMonday("s");
    this.mondayEnd = this.getMonday("e");
    // 当前班次签到情况
    this.shiftStatistics();
    this.todaySituationApi();
    this.init({ type: 1 }); // 日志
    this.init({ type: 2 });// 日报
    this.players = [];
    this.videoArr();
    this.getLevelUnit();
  },
  beforeDestroy() {
    this.players.forEach(el => {
      el && el.destroy();
      el = null;
    });
  },
  methods: {
    getLevelUnit() {
      getResourceLevelUnit({ orgId: JSON.parse(sessionStorage.getItem("org")).orgId }).then(res => {
        const option = res;
        option.unshift({ id: "", orgOtherName: "全部" });
        this.videoOption = option;
      });
    },
    videoArr() {
      this.videoList.forEach((item) => {
        this.play(item.code);
      });
    },
    play(devCode) {
      const videourl = process.env.VUE_APP_SHIPIN_URL;
      const url = `${videourl}/ems/v1/uvp/api/playvideo?code=${devCode}`;
      Axios.get(url).then(res => {
        console.log(res);
        if (res.status === 200) {
          let location = res.data.location;
          if (location) {
            const path = location.split("/mediatranscode")[1];
            location = `${videourl}/mediatranscode${path}`;
          }
          var videoElement = document.getElementById(`flv-${devCode}`);
          const flvPlayer = flv.createPlayer({
            type: "flv",
            url: location
          }, {
            autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
            autoCleanupMinBackwardDuration: 10, // 指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
            isLive: true,
            lazyLoadMaxDuration: 60
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
          this.players.push(flvPlayer);
        }
      });
    },
    async init(data) {
      // 饼图
      // this.getPieData(data).then(res => {
      //   if (data.type == 1) {
      //     this.pie1_data = res;
      //   } else {
      //     this.pie2_data = res;
      //   }
      // });
      // 柱状图
      this.getBarData(data);
      // 日志日报列表
      this.selectDailyOrLog(data);
    },
    // 获取当前周的开始结束时间
    getMonday(type, dates) {
      // type为字符串类型，有两种选择，"s"代表开始,"e"代表结束，
      // dates为数字类型，不传或0代表本周，-1代表上周，1代表下周
      const now = new Date();
      const nowTime = now.getTime();
      let day = now.getDay();
      const longTime = 24 * 60 * 60 * 1000;
      const n = longTime * 7 * (dates || 0);
      let dd = "";
      if (type == "s") {
        dd = nowTime - (day - 1) * longTime + n;
      } else if (type == "e") {
        dd = nowTime + (7 - day) * longTime + n;
      }
      dd = new Date(dd);
      const y = dd.getFullYear();
      let m = dd.getMonth() + 1;
      let d = dd.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      day = y + "-" + m + "-" + d;
      return day;
    },
    dutyMoreClose() {
      this.dutyMoreDialog.isShow = false;
    },
    closeDialog() {
      this.dialogParticulars.isShow = false;
    },
    async onMore(data, title = "") {
      const org = JSON.parse(sessionStorage.org);
      this.dutyMoreDialog.title = (data.type == 1 ? "日志详情-" : "日报详情-") + (title || org.orgName);
      const res = await selectDailyOrLogApi(Object.assign({ reportStartTime: "", reportEndTime: "" }, data));
      if (res) {
        this.moreData = res;
      }
      this.dutyMoreDialog.isShow = true;
    },
    async clickSign(num, type, unitName, flag = false) {
      if (num != 0) {
        if (!flag) {
          this.signData = { num, type, unitName };
          this.pagination = {
            pageNum: 1,
            pageSize: 10
          };
        }
        const unit = "国网湖北省电力有限公司";
        const startTime = parseStamp(new Date(new Date(new Date().toLocaleDateString()).getTime()));
        const endTime = parseStamp(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1));
        let res = null;
        switch (type) {
          case 1:
            this.dialogParticulars.title = `值班人数-${unit}`;
            this.dialogConfig = columns_zhiban;
            res = await getNumberOnDutyApi(Object.assign(this.pagination, { unitName, mainStartTime: parseStamp(new Date()) }));
            break;
          case 2:
            this.dialogParticulars.title = `已签到详情-${unit}`;
            this.dialogConfig = columns_yiqiandao;
            res = await getSignInListApi(Object.assign(this.pagination, { unitName, type: 1, startTime, endTime }));
            break;
          case 3:
            this.dialogParticulars.title = `未签到详情-${unit}`;
            this.dialogConfig = columns_weiqiandao;
            res = await getSignInListApi(Object.assign(this.pagination, { unitName, type: 0, startTime, endTime }));
            break;
          case 4:
            this.dialogParticulars.title = `迟到详情-${unit}`;
            this.dialogConfig = columns_chidao;
            res = await getLateApi(Object.assign(this.pagination, { unitName, startTime, endTime }));
            break;
          case 5:
            this.dialogParticulars.title = `早退详情-${unit}`;
            this.dialogConfig = columns_zaotui;
            res = await getEarlyApi(Object.assign(this.pagination, { unitName, startTime, endTime }));
            break;
          case 6:
            this.dialogParticulars.title = `缺勤详情-${unit}`;
            this.dialogConfig = columns_queqin;
            res = await getAbsenteeismApi(Object.assign(this.pagination, { unitName, startTime, endTime }));
            break;
          case 7:
            this.dialogParticulars.title = `请假详情-${unit}`;
            this.dialogConfig = columns_qingjia;
            res = await getLeaveApi(Object.assign(this.pagination, { unitName, startTime, endTime }));
            break;
        }
        if (res) {
          this.dialogData = res.data;
          this.particularsTotal = res.total;
          this.dialogParticulars.isShow = true;
          this.$nextTick(() => {
            this.$refs.particularsTable.setFlex();
          });
        }

        // this.dialogData = filtrateData(type, unitName) || [];
      }
    },
    particularsPageChange(val) {
      this.pagination = val;
      this.clickSign(this.signData.num, this.signData.type, this.signData.unitName, true);
    },
    todaySituationApi() {
      todaySituation({
        dutyDate: this.nowTime,
        unitName: JSON.parse(sessionStorage.org).orgName
      }).then(res => {
        if (res) {
          this.conditionNum = res;
        }
      });
    },
    async getBarData(data) { // type 1日志 2日报
      const res = await histogramDailyOrLogApi(Object.assign({
        createDeptName: JSON.parse(sessionStorage.org).orgName,
        reportStartTime: this.nowTime,
        reportEndTime: this.nowTime
      }, data));
      if (res) {
        if (data.type == 1) {
          this.bar2_data = res;
          this.pie2_data = res;
        } else {
          this.pie1_data = res;
          this.bar1_data = res;
        }
      }
    },
    // getPieData(data) {
    //   return new Promise((resolve, rej) => {
    //     selectDailySumApi(Object.assign({ reportStartTime: this.monthStart, reportEndTime: this.monthEnd }, data)).then(res => { // 日报统计饼图
    //       let arr = [];
    //       if (res) {
    //         console.log("饼图" + data.type, res);
    //         arr = res.map(item => {
    //           return {
    //             color: item.submitorsave == 1 ? "#168BF2" : "#F4936A",
    //             name: item.submitorsave == 1 ? "已报" : "未报",
    //             sliced: true,
    //             y: item.number
    //           };

    //         });
    //       }
    //       resolve(arr);
    //     });
    //   });
    // },
    dailyChange(time) {
      this.daily_type = time ? "4" : "1";
      const params = {
        reportStartTime: time ? this.daily_date[0] : this.monthStart,
        reportEndTime: time ? this.daily_date[1] : this.monthEnd,
        type: 2
      };
      this.init(params);
    },
    logChange(time) {
      this.log_type = time ? "4" : "1";
      const params = {
        reportStartTime: time ? this.log_date[0] : this.monthStart,
        reportEndTime: time ? this.log_date[1] : this.monthEnd,
        type: 1
      };
      this.init(params);
    },
    tabsDate(key, type) {
      const params = {
        type,
        reportStartTime: key == "1" ? this.monthStart : key == "2" ? this.mondayStart : this.nowTime,
        reportEndTime: key == "1" ? this.monthEnd : key == "2" ? this.mondayEnd : this.nowTime
      };

      this.init(params);
    },
    async selectDailyOrLog(data) { // 日报统计表格
      const res = await selectDailyOrLogApi(Object.assign({ reportStartTime: this.nowTime, reportEndTime: this.nowTime }, data));
      if (res) {
        if (data.type == 1) {
          console.log("日志", res);
          this.log_table = res;
        } else {
          console.log("日报", res);
          this.daily_table = res;
        }
      }
    },
    // 当前班次签到情况
    shiftStatistics() {
      const startTime = parseStamp(new Date(new Date(new Date().toLocaleDateString()).getTime()));
      const endTime = parseStamp(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1));
      const params = {
        unitName: JSON.parse(sessionStorage.org).orgName,
        startTime: startTime,
        endTime: endTime,
        pageNum: 1,
        pageSize: 100
      };
      getSignInStatusApi(params).then(res => {
        console.log("当前班次签到情况", res);
        this.sign_table = res.data;
      });
    }
  }
};
</script>

<style lang='less' scoped>
.box {
  box-sizing: border-box;
  border: 1px solid #0649d7;
  border-radius: 4px;
  display: flex;
  flex-direction: column;

  &:not(:first-child) {
    margin-top: 18px;
  }

  // :deep(.el-radio-group) {
  //   margin-left: 10px;
  // }

  :deep(.el-radio-button + .el-radio-button) {
    margin-left: 10px;
  }

  :deep(.el-radio-button__inner) {
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid #14a8ed;
    color: #fff;
    font-size: 14px;
    padding: 7px 18px;
  }

  :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-left: 1px solid #14a8ed;
  }

  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #007fcf;
    box-shadow: none;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    background-color: rgba(38, 92, 255, 0.223529411764706);
    padding: 0 20px;

    .left {
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #d5f0ff;
    }

    .right {
      display: flex;
      align-items: center;

      // 时间区间
      :deep(.el-date-editor--datetimerange.el-input__inner) {
        background-color: transparent;
        width: 200px;
      }

      :deep(.el-date-editor) {
        border-color: #14a8ed;
        margin-right: 10px;

        .el-range-input {
          background-color: transparent;
          color: #fff;
          font-size: 14px;
        }

        .el-range-separator {
          color: #fff;
        }
      }
    }
  }

  .content {
    padding: 18px;
    box-sizing: border-box;
    flex: 1;

    .flex {
      display: flex;
      justify-content: space-between;
      height: 100%;

      .today-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 275px;
        height: 100%;
        border-radius: 4px;
        background-color: rgba(13, 35, 82, 0.498039215686275);
        padding-left: 20px;
        padding-right: 40px;
        box-sizing: border-box;

        .icon {
          width: 80px;
          height: 80px;
          margin-right: 20px;
        }

        .item-right {
          color: #fff;
          font-size: 24px;

          .right-top {
            font-weight: 700;
          }

          .right-bottom {
            .strong {
              font-size: 26px;
              font-weight: 700;
            }
          }
        }
      }
    }
  }

  .table-class {
    :deep(.el-table) {
      background-color: transparent;
      color: #fff;
      border-bottom: 1px solid #22588f;

      &::before,
      &::after {
        background-color: #22588f;
      }

      // &::after {
      //   width: 0;
      // }

      tr {
        background-color: transparent;
      }

      th.el-table__cell {
        background-color: #193f8e;
        padding: 12px 0;

        &.is-leaf {
          border-bottom: 1px solid #22588f;
        }
      }

      td.el-table__cell {
        border-bottom: 1px solid #22588f;
        padding: 12px 0;
      }
    }

    :deep(.el-table__body) {
      box-sizing: border-box;
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
      background-color: transparent;
    }

    :deep(.el-table--border) {
      border-color: #22588f;

      .el-table__cell {
        border-right: 1px solid #22588f;
      }
    }

    :deep(div::-webkit-scrollbar-track) {
      background: transparent;
    }

    :deep(.has-gutter) {
      th:last-child {
        display: none;
      }
    }

    :deep(.el-table__empty-block) {
      border-right: 1px solid #22588f;
      box-sizing: border-box;
    }
  }


  .h-150 {
    height: 120px;
  }

  .h-230 {
    height: 210px;
  }

  .h-337 {
    height: 302px;
  }
}

.more-btn {
  text-decoration: underline;
  color: #3076e3;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 15px;
}

.num-link {
  color: #008dff;
  text-decoration: underline;
  cursor: pointer;
}

.video {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .input {
    display: flex;
    align-items: center;
    padding-bottom: 20px;

    :deep(.el-input__inner) {
      height: 32px;
      background-color: rgba(0, 127, 207, 0.2);
      border: 1px solid #36afff;
      color: #ccc;
    }

    :deep(.el-button) {
      background-color: #007fcf !important;
      margin-left: 10px;
    }
  }

  .video-item {
    flex: 1;
    overflow-y: auto;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    >div {
      width: 21%;

      video {
        height: 100px;
        width: 100%;
        vertical-align: middle;
        object-fit: fill;
      }

      >p {
        width: 100%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

    }
  }
}

:deep(div::-webkit-scrollbar) {
  height: 8px;
}

.height100 {
  height: 100%;
}
</style>
